<template>
	<div class="bookItem" @click="itemclick">
		<!-- 把book_items的数据再传下去，传给书本详情页 -->
		<slot name="delbut"></slot>

		<div class="pic"><img :src="book_items.book_cover"></div>
		<div class="book_tex">
			<p class="book_tit">{{book_items.book_name}}</p>
			<p class="book_aut">{{book_items.author}}</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'bookItem',
		props: {
			book_items: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		methods: {
			// 点击小书籍块实现携带参数跳转
			itemclick() {
				//方式1，可以用动态路由方式
				// query方式拼接路由
				this.$router.push('/bookdetailpage/' + this.book_items.id)
			}
		}
	}
</script>

<style>
	.bookItem {
		width: 45%;
		border-radius: 8px;
		position: relative;
		padding-bottom: 60px;
	}
	.bookItem img {
		width: 100%;
		border-radius: 5px;
	}

	.book_tex {
		font-size: 16px;
		text-align: center;
		overflow: hidden;
		position: absolute;
		/* bottom: 5px; */
		left: 0;
		right: 0;
	}

	.book_tex .book_tit {
		color: #8C8C8C;
		text-overflow: ellipsis;
		/* 设置文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止 */
		white-space: nowrap;
	}

	.book_tex .book_aut {
		color: #5CB85C;
		font-size: 13px;
		text-align: center;
		margin-top: -10px;
	}
</style>
